<template>
  <div style="height: 400px;padding-top: 100px">
    <dv-list-decoration :modules="models" style="margin-left: 0px;"/>
    <div style="text-align:center;margin-bottom: -10px">
      <input type="file" ref="trainDataFileInput" style="display: none;" @change="handleTrainDataFileChange">
      <dv-button @click="centerDialogVisible = true">上传训练模型</dv-button>
      <!--      <dv-button @click="uploadTrainingModel">上传训练模型</dv-button>-->
      <dv-button @click="downloadTrainingModel">下载训练模型</dv-button>
      <el-dialog
          title="提示"
          :visible.sync="centerDialogVisible"
          :modal="false"
          width="30%"
          center>
        <div style="margin-left: 100px">
          <dv-input label="模型名称" :options="models1" v-model="model.name"></dv-input>
          <dv-input label="模型名" :options="models2" v-model="model.model"></dv-input>
          <dv-input label="模型包" :options="models3" v-model="model.modelpackage"></dv-input>
          <dv-button @click="uploadTrainingModel" style="margin-left: 70px;">上传训练模型</dv-button>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <!--          -->
        <el-button type="primary" @click="upLoadTrainModel()">确 定</el-button>
      </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import dvListDecoration from "@/components/dv-list-decoration";
import dvButton from "@/components/dv-button";
import dvInput from '@/components/dv-input'
//书写我们的接口
import {getModelData, downloadModel, upLoadModel} from '@/api/model';

export default {
  name: "topright",
  components: {dvListDecoration, dvButton, dvInput},
  //todo mounted 选择性实现功能
  mounted() {
    this.$bus.$on('getModelData', (data) => {
      this.models = data
    })
    this.$bus.$on('reloadModelData', (data) => {
      this.models = data
    })
    this.$bus.$on('getSelectedModel', (data) => {
      this.selctedModel = data
    })
    this.getModelData()
  },
  beforeDestroy() {
    // 组件被销毁了，不能进行数据传输
    // 解绑事件
    this.$bus.$off('getModelData')
    this.$bus.$off('reloadModelData')
  },
  data() {
    return {
      isDownloadModel: true,
      trainDataFile: null,
      models: [],
      centerDialogVisible: false,
      selctedModel: {},
      //需要上传的模型
      model: {
        name: "",
        model: "",
        //模型所在的包
        modelpackage: "",
        file: null
      },
      models1: [
        {label: 'model01', value: 'model01'},
        {label: 'model02', value: 'model02'},
        {label: 'model03', value: 'model03'}
      ],
      models2: [
        {label: 'DecisionTreeClassifier', value: 'DecisionTreeClassifier'},
        {label: 'KDTree', value: 'KDTree'},
        {label: 'SVC', value: 'SVC'}
      ],
      models3: [
        {label: 'tree', value: 'tree'},
        {label: 'neighbors', value: 'neighbors'},
        //怎么处理没有明白
        {label: 'svm', value: 'svm'}
      ],
    }
  },
  methods: {
    close() {
      this.centerDialogVisible = false
    },
    // 上传训练模型到服务器去
    upLoadTrainModel() {
      if (this.model.name !== '' && this.model.model !== '' && this.model.modelpackage !== '') {
        let formData = new FormData();
        formData.append("name", this.model.name)
        formData.append("model", this.model.model)
        formData.append("package", "sklearn." + this.model.modelpackage)
        formData.append("group", "white")
        formData.append("file", this.model.file)
        upLoadModel(formData).then(res => {
          if (res.data != null) {
            this.$message.info("模型上传成功")
            this.model = {}
          }
          this.getModelData()
          this.centerDialogVisible = false
          //下载我们的模型参数
        })
      } else {
        this.$message.info('请补全参数')
      }

    },
    // todo
    getModelData() {
      getModelData().then(res => {
        this.models = res.data.msg
      })
    },
    uploadTrainingModel() {
      this.$nextTick(() => {
        this.$refs.trainDataFileInput.click();
      });
    }
    ,
    handleTrainDataFileChange(event) {
      this.$message.info("模型已上传")
      this.model.file = event.target.files[0];
    },
    downloadTrainingModel() {
      // todo 想后端发送请求
      var model_id = this.selctedModel.id;
      if (model_id == null) {
        this.$message.error('请先选择模型')
        return
      }
      downloadModel(model_id).then(res => {
        const data = res.data;
        const blob = new Blob([data], {type: 'application/octet-stream'});
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'model.plk';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      })
    }
  }

}
</script>

<style scoped>
/deep/ .el-dialog__footer {
  background: black;
}

/deep/ .el-dialog__body {
  background: black;

}
</style>
